<template>
	<view class="container">
		<view class="top-card">
			<view class="state">
				待支付
			</view>
		</view>

		<view class="list">
			<scroll-view class="scroll-view_H" scroll-y="true" style="height: calc(100vh - 310rpx);">
				<view class="items">
					<view class="item" v-for="(item,index) in drugList" :key="index">
						<text class="left payItem-left">{{item.feeName}}</text>
						<text class="center payItem-center">X {{item.count}}</text>
						<text class="right">￥{{item.price}}</text>
					</view>
					<view class="dept topber">
						<view class="deptTop">
							<text class="left"></text>
							<view class="payBtn flex"><text>总计 ￥</text><text class="nums">{{allAccount}}</text>
								<u-icon v-if="false" name="arrow-down" style="margin-left:10px;"></u-icon>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- <view class="footer_btn">
			<u-button type="primary" :plain="true" text="微信支付" @click="prescriptionCheck('微信支付')"></u-button>
			<u-button type="primary" text="医保支付" @click="prescriptionCheck('医保支付')"></u-button>
		</view> -->
		<u-picker :show="showType" :columns="columns" @confirm="confirm"></u-picker>
		<liuCalendarDate ref="calendar2" isRange @checked='changeTime'></liuCalendarDate>
		<!-- 切换就诊人 -->
		<u-popup :show="showVisitCard" :round="10" :safeAreaInsetBottom="true" mode="bottom">
			<switchVisitCard :visitData="visitList" :relations="relationTrans" @closeVisit="close" />
		</u-popup>
	</view>
</template>
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script>
	import {
		getPayMentDetailList,
		payUnifiedOrder,
		checkOutpatientPayment,
	} from "@/api/pay/index.js"
	import switchVisitCard from '@/components/switchVisitCard/index.vue';
	import liuCalendarDate from '@/components/liu-calendar-date/liu-calendar-date.vue';
	import {
		getDictType
	} from "@/api/system/public.js";
	import {
		encrypt,
		decrypt
	} from '@/utils/sm4Util.js'
	import {
		multiply,
		add,
		subtract,
		divide
	} from "accurate-core";
	export default {
		components: {
			switchVisitCard,
			liuCalendarDate
		},
		data() {
			return {
				infoData: {},
				timesRange: '全部时间',
				typesName: '全部类型',
				showTime: false,
				visitList: [],
				showVisitCard: false,
				relationTrans: {},
				showType: false,
				columns: [
					['全部类型', '检查报告', '检验报告']
				],
				prescriptionNo: '',
				drugList: [],
				allAccount: '0.00',
				openid: '',
			}
		},
		watch: {
			drugList: {
				handler(newVal) {
					let allPrice = 0;
					for (let i = 0; i < newVal.length; i++) {
						allPrice = add(allPrice, multiply(Number(newVal[i].price), Number(newVal[i].count)))
					}
					this.allAccount = (Math.floor(multiply(allPrice, 100)) / 100).toFixed(2) || '0.00'
				},
				deep: true,
				immediate: true
			},
		},
		onLoad(options) {
			let openid = uni.getStorageSync('openid') || ''
			this.openid = openid
			if (uni.getStorageSync('currentVisitCard')) {
				this.infoData = JSON.parse(uni.getStorageSync('currentVisitCard'))
			}
			this.prescriptionNo = options.prescriptionNo
			this.getPayMentDetailList();
		},
		methods: {
			jsAllAmount(num) {
				var num1 = parseFloat(num);
				if (!isNaN(num1)) {
					num1 = Math.round(num1 * 1000) / 1000;
					var str = num1.toString();
					var rs = str.indexOf('.');
					if (rs < 0) {
						rs = str.length;
						str += '.';
					}
					while (str.length <= rs + 2) {
						str += '0';
					}
					return str
				}
			},
			/* 处方校验 */
			prescriptionCheck(type) {
				if (type == "医保支付") {
					this.$msg("功能研发中");
					return
				}
				checkOutpatientPayment({
					cfhList: this.prescriptionNo,
					name: JSON.parse(uni.getStorageSync('currentVisitCard')).name,
					cardNum: JSON.parse(uni.getStorageSync('currentVisitCard')).cardNum
				}).then(res => {
					if (res.code == 200) {
						if (type == "微信支付") {
							this.payByMyself(this.prescriptionNo, this.allAccount)
						}
					}

				});
			},
			/* 自费支付 */
			payByMyself(recipelNum, orderAmount) {
				let _that = this
				let names = JSON.parse(uni.getStorageSync('currentVisitCard')).name
				let obj = {
					"hospitalCode": JSON.parse(uni.getStorageSync('hospital'))
						.hospitalCode, //医院微信唯一标识
					"openId": _that.openid, //微信唯一标识
					"bh": JSON.parse(uni.getStorageSync('currentVisitCard'))
						.cardNum, //住院号/卡号
					"recipelNum": recipelNum, //处方号（门诊业务专用字段
					"orderAmount": orderAmount, //订单金额
					"orderDesc": "门诊支付-" + names, //订单描述（医卡通，预约，门诊支付 住院押金）
					"payType": "weChat", //支付类型（weChat:微信 Alipay:支付宝）
					"orderType": "3" //订单类型（1医卡通，2预约，3门诊支付 4住院押金）
				}
				let param = {
					params: encrypt(JSON.stringify(obj))
				}
				payUnifiedOrder(param).then(resporns => {
					WeixinJSBridge.invoke('getBrandWCPayRequest', {
							"appId": resporns.data.appId,
							"timeStamp": resporns.data.timeStamp,
							"nonceStr": resporns.data.nonceStr,
							"package": resporns.data.package,
							"signType": "MD5",
							"paySign": resporns.data.paySign,
						},
						function(resporns) { // 调起微信支付成功
							if (resporns.err_msg ==
								"get_brand_wcpay_request:ok") {
								_that.$msg("支付成功!");

							} else if (resporns.err_msg ==
								"get_brand_wcpay_request:cancel") {
								_that.$msg("用户取消支付!");
							} else {
								_that.$msg("支付失败,请重新支付!" + resporns.err_msg);
							}
						});
				})

			},
			getCardList() {
				let params = {
					hospitalCode: JSON.parse(uni.getStorageSync('hospital')).hospitalCode,
					openId: this.openid,
				}
				getPatientBaseList(params).then(res => {
					if (res.code == 200) {
						this.visitList = res.rows
					}
				})
			},
			getPayMentDetailList() {
				let obj = {
					name: JSON.parse(uni.getStorageSync('currentVisitCard')).name,
					cardNum: JSON.parse(uni.getStorageSync('currentVisitCard')).cardNum,
					prescriptionNo: this.prescriptionNo
				}
				getPayMentDetailList(obj).then(res => {
					this.drugList = res.data || []
				})
			},
			goDtl(item) {
				uni.navigateTo({
					url: '/pages/pay/details?id=' + item.id
				})
			},
			close() {
				this.showVisitCard = false
			},
			confirm(e) {
				this.typesName = e.value[0]
				this.showType = false
			},
			showTypes() {
				this.showType = true
			},
			showpop() {
				this.$refs.calendar2.open()
			},
			changeTime(time) {
				this.timesRange = time.value[0] + '至' + time.value[1]
				console.log(time)
			},
			/* 字典 */
			getDict() {
				getDictType({
					dictType: 'sys_relation'
				}).then(res => {
					console.log(res)
					if (res.code == 200) {
						res.rows.forEach(item => {
							this.relationTrans[item.dictValue] = item.dictLabel
						})
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: rgb(245, 245, 245);
	}

	.footer_btn {
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: space-around;
		text-align: center;
		width: 100%;
		padding: 24rpx;
		background-color: #fff;

		.u-button {
			width: 40%;
		}
	}

	.top-card {
		width: 100%;
		height: 120px;
		background: linear-gradient(180deg, rgba(77, 142, 255, 1) 0%, rgba(22, 119, 255, 0) 100%);
		position: relative;

		.state {
			padding: 52rpx 30rpx;
			font-size: 36rpx;
			font-weight: bold;
			color: #fff;
		}
	}

	.list {
		margin: 0 24rpx;
		margin-top: -80rpx;

		.items {
			padding: 24rpx;
			background-color: #fff;
			border-radius: 8px;
			margin-bottom: 20rpx;

			.title {
				padding: 0 0 24rpx 0;
				display: flex;
				font-size: 32rpx;
				font-weight: 600;
				align-items: center;
				border-bottom: 1rpx solid #eee;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.names {
					flex: 1;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}

				.btn {
					width: 100rpx;
					font-size: 28rpx;
					color: #FF6430;
					text-align: right;
				}
			}

			.more,
			.retract {
				padding: 0 0 24rpx 0;
				width: 100%;
				text-align: center;
			}

			.item,
			.name,
			.icd,
			.time,
			.dept {
				display: flex;
				justify-content: space-between;
				padding: 12rpx 0;

				.left {
					color: #999;
					width: 130rpx;
				}

				.payItem-left {
					flex: 3;
					color: #333;
				}

				.payItem-center {
					flex: 1;
				}

				.payBtn {
					display: flex;
					align-items: center;

					span {
						display: flex;
						align-items: center;
					}

					.nums {
						font-size: 40rpx;
					}
				}

				.hidenView {
					.hidenViewItem {
						display: flex;
						align-items: center;
						justify-content: space-between;
						color: #999;
						font-size: 28rpx;
						padding: 12rpx 0;
					}

					.yibaoinfo {
						display: flex;
						align-items: center;
						justify-content: space-between;
						flex-direction: column;
						color: #999;
						background-color: #F5F5F5;
						border-radius: 4px;
						font-size: 28rpx;
						padding: 12rpx;

						.yibaoinfoItem {
							width: 100%;
							padding: 12rpx;
							display: flex;
							align-items: center;
							justify-content: space-between;
						}
					}
				}

				.moneyw {
					display: flex;
					font-size: 24rpx;
					color: #999;

					.money {
						color: #000;
					}

					.nums {
						font-size: 40rpx;
						color: #000;
					}
				}
			}

			.topber {
				border-top: 1rpx dashed #999;
				padding: 24rpx 0 0 0;
				flex-direction: column;
				margin-top: 10rpx;

				.deptTop {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 10rpx;
				}
			}
		}
	}
</style>